body {
    margin: 0;
	overflow-x: hidden;
}

/* Blocs interactifs */
#tangente, #contact, #textcontact {
    transition: all 0.3s ease; /* animation douce si on change la taille */
}

/* image arrièreplan */
/* Fond image fixe derrière le texte */
#background-img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;            /* prend toute la largeur de l’écran */
    height: auto;           /* prend toute la hauteur de l’écran */
    background-image: url("maeterlinck- Compact.JPG");
    background-size: cover;        /* garde les proportions, remplit l’écran et coupe si besoin */
    background-repeat: no-repeat;
    background-position: center;   /* centre l’image */
    z-index: -1;                   /* derrière le texte */
    background-color: grey;
}
/* Conteneur texte */
#container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Texte dans le container */
#text-container {
        position: absolute; /* important pour utiliser top/left */
    Bottom: 17.5%;
    left: 54%;
    transform: translate(-50%, -40%); /* centrage parfait */
	display: flex;
    width: 40%;
    height: auto;

    color: #FC6563;
    font-family: geosanslight, sans-serif;
    text-align: center; /* centre le texte à l'intérieur */
}

/* Texte contact */
#textcontact {
	 position: absolute; /* ou fixed selon ton besoin */
    bottom: 1%;
    left: 0%;
	display: flex;
    width: auto;
    height: auto;
  color: #FC6563;
    font-family: geosanslight, sans-serif;
}

/* Texte porfolio lien */
#textlienportfolio a {
	 position: absolute; /* ou fixed selon ton besoin */
    bottom: 5%;
    left: 0%;
	display: flex;
    width: auto;
    height: auto;
  color: #FC6563;
   text-decoration: none; /* enlève le soulignement */
    font-family: geosanslight, sans-serif;
}

#textlienportfolio a:visited {
    color: #FC6563; /* évite le violet */
}

#textlienportfolio a:hover {
    text-decoration: underline; /* effet au survol */
}


@media (max-width: 768px) {
	#background-img {
    width: auto;            /* prend toute la largeur de l’écran */
    height: 100vh;           /* prend toute la hauteur de l’écran */
	}
	
    #text-container {
        width: 60%;
        font-size: clamp(16px, 6vw, 24px); /* un peu plus gros proportionnellement */
    }
}

@media (max-width: 360px) {
	#background-img {
    width: auto;            /* prend toute la largeur de l’écran */
    height: 100vh;           /* prend toute la hauteur de l’écran */
	}
	
   #text-container {
        font-size: clamp(14px, 6vw, 18px);
    }
    #textcontact a, #textlienportfolio a {
        font-size: 14px;
    }
}